<template>
  <PanelBox :image="image">
    <el-carousel trigger="click" class="rainfall-box">
      <el-carousel-item
        class="rainfall-box-two"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <RainLine
          class="rainfall-box-three"
          :data="item.dataLine"
          :title="item.title"
        />
      </el-carousel-item>
    </el-carousel>
  </PanelBox>
</template>

<script>
import PanelBox from "@/component/PanelBox";
import RainLine from "./component/RainLine";
import { FetchGetTailingRain } from "@/api";

export default {
  name: "Rainfall",

  components: {
    PanelBox,
    RainLine,
  },

  props: {
    image: {
      type: String,
      default() {
        return "";
      },
    },
  },

  data() {
    return {
      dataList: [],
      // dataList: [
      //     {
      //         title: "陈坑尾矿库",
      //         dataLine: [
      //             { name: "02-24", value: 5 },
      //             { name: "02-25", value: 3 },
      //             { name: "02-26", value: 2 },
      //             { name: "02-27", value: 4 },
      //             { name: "02-28", value: 9 },
      //             { name: "03-01", value: 5 },
      //             { name: "03-02", value: 2 },
      //         ],
      //     },
      //     {
      //         title: "陈坑尾矿库2",
      //         dataLine: [
      //             { name: "02-24", value: 35 },
      //             { name: "02-25", value: 30 },
      //             { name: "02-26", value: 32 },
      //             { name: "02-27", value: 40 },
      //             { name: "02-28", value: 19 },
      //             { name: "03-01", value: 25 },
      //             { name: "03-02", value: 42 },
      //         ],
      //     },
      //     {
      //         title: "陈坑尾矿库3",
      //         dataLine: [
      //             { name: "02-24", value: 5 },
      //             { name: "02-25", value: 3 },
      //             { name: "02-26", value: 3 },
      //             { name: "02-27", value: 3 },
      //             { name: "02-28", value: 1 },
      //             { name: "03-01", value: 2 },
      //             { name: "03-02", value: 4 },
      //         ],
      //     },
      //     {
      //         title: "陈坑尾矿库4",
      //         dataLine: [
      //             { name: "04-24", value: 7 },
      //             { name: "05-25", value: 1 },
      //             { name: "06-26", value: 4 },
      //             { name: "05-25", value: 6 },
      //             { name: "02-28", value: 5 },
      //             { name: "03-01", value: 3 },
      //             { name: "03-02", value: 4 },
      //         ],
      //     },
      // ],
    };
  },

  created() {
    this.refreshList();
  },

  methods: {
    refreshList() {
      FetchGetTailingRain().then((res) => {
        this.dataList = res.map((item) => ({
          title: item.tailingName,
          dataLine: item.rainList.map((item2) => ({
            name: item2.theDate,
            value: item2.data,
          })),
        }));
        // console.log(res, "res,res,res,res,res,rse")
        // console.log(this.dataList, "dataList,dataList,dataList")
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rainfall-box {
  width: 100%;
  height: 230px;
  overflow: hidden;
  .rainfall-box-two {
    width: 385px;
    height: 230px;
    .rainfall-box-three {
      width: 385px;
      height: 230px;
    }
  }
  >>> {
    .el-carousel__container {
      height: 230px;
    }
  }
  >>> {
    .el-carousel__indicators--horizontal {
      display: none;
    }
  }
}
</style>
